<template>
  <div :style="{'width':param.width,'height': param.height}" ref="yfuTreeDiv">
    <div style="height:30px">
      <el-input v-if="param.showSearch"
        placeholder="输入名称进行过滤"
        size="mini"
        v-model="filterText">
      </el-input>
    </div>
    <div style="height:5px"></div>
    <div class="tfscrollbarstyle" :style="{'width': '100%','height': treeHeigth}">
      <el-tree
        class="filter-tree"
        empty-text="没有数据"
        node-key="id"
        :expand-on-click-node="false"
        :data="datas"
        :props="param.defaultProps"
        :highlight-current="param.highLightCurrent == null ? true : param.highLightCurrent"
        :filter-node-method="filterNode"
        :default-expand-all="true"
        @node-click="nodeClick"
        @check-change="getCheckeds"
        :default-checked-keys="nodeDefaultCheckBox"
        :show-checkbox="param.showCheckBox"
        :check-strictly="param.checkstrictly"
        ref="yfuTree">
      </el-tree>
    </div>

  </div>
</template>
<style>

</style>
<script>
  import { yfuPost, tfGet } from '@/utils/request.js'
  import global_ from '@/utils/global.vue'
  export default {
    props: ['param'],
    watch: {
      filterText (val) {
        this.$refs.yfuTree.filter(val)
      }
    },
    created () {
      if (this.param.noCreatedRequest === 1) {
        return
      }
      this.getData()
    },
    methods: {
      filterNode (value, data) {
        if (!value) return true
        if (this.param.defaultProps != null && this.param.defaultProps !== '') {
          return data[this.param.defaultProps.label].indexOf(value) !== -1
        } else {
          return data.label.indexOf(value) !== -1
        }
      },
      // 赋值
      assignData (data) {
        if (Array.isArray(data)) {
          this.datas = data
        } else {
          if (this.param.returnParam != null && this.param.returnParam !== '') {
            this.datas = data[this.param.returnParam.datas]
            this.nodeDefaultClick = data[this.param.returnParam.nodeDefaultClick]
            this.nodeDefaultCheckBox = data[this.param.returnParam.nodeDefaultCheckBox]
          } else {
            this.datas = data.datas
            this.nodeDefaultClick = data.nodeDefaultClick
            this.nodeDefaultCheckBox = data.nodeDefaultCheckBox
          }
        }
      },
      getData () {
        let cThis = this
        let tParam = {}
        if (this.param.urlParam != null && this.param.urlParam !== '') {
          tParam = this.param.urlParam
        }
        if (global_.isLocalServer) {
          tfGet(this.param.url, function (data) {
            cThis.assignData(data)
          })
        } else {
          yfuPost(this.param.baseURL, this.param.url, tParam, function (data) {
            cThis.assignData(data)
          })
        }
      },
      nodeClick (data, node, item) {
        this.$emit('nodeClick', data)
      },
      getCheckeds (data, node, item) {
        let checked = this.$refs.yfuTree.getCheckedNodes()
        this.$emit('nodeCheckeds', checked)
      },
      setKeys (data) {
        this.$refs.yfuTree.setCheckedKeys(data)
      },
      getAllCheckeds () {
        let checked = this.$refs.yfuTree.getCheckedNodes()
        return checked
      },
      refresh () {
        this.getData()
      },
      getCurrentNode () {
        let node = this.$refs.yfuTree.getCurrentNode()
        return node
      },
      getParentIdName (parentId) {
        if (this.datas != null) {
          this.node = {}
          this.getNode(this.datas, parentId)
          return this.node.indicatorsName
        } else {
          return ''
        }
      },
      getNode (json, nodeId) {
        // 1.第一层 root 深度遍历整个JSON
        for (let i = 0; i < json.length; i++) {
          let obj = json[i]

          // 2.有节点就开始找，一直递归下去
          if (obj.id === nodeId) {
            // 找到了与nodeId匹配的节点，结束递归
            this.node = obj
            break
          } else {
            // 3.如果有子节点就开始找
            if (obj.children) {
              // 递归往下找
              this.getNode(obj.children, nodeId)
            } else {
              // 跳出当前递归，返回上层递归
              continue
            }
          }
        }
      }
    },
    mounted () {
      let h = this.$refs.yfuTreeDiv.getBoundingClientRect().height
      if (h === 0 || h === '0') {
        h = this.$refs.yfuTreeDiv.style.height
      }
      if (typeof h === 'string') {
        let index = h.indexOf('px')
        let hNumber = h.substring(0, index)
        h = hNumber - 35
        this.treeHeigth = h + 'px'
      } else {
        if (h > 0) {
          h = h - 35
          this.treeHeigth = h + 'px'
        }
      }
      console.log(this.treeHeigth)
    },
    updated () {
      if (this.datas != null && this.datas.length > 0) {
        if (this.nodeDefaultClick != null && this.nodeDefaultClick !== '') {
          this.$refs.yfuTree.setCurrentKey(this.nodeDefaultClick)
        }
      }
    },
    data () {
      return {
        node: {},
        filterText: '',
        datas: [],
        nodeDefaultClick: '',
        nodeDefaultCheckBox: [],
        treeHeigth: 0
      }
    }
  }
</script>
